<template>
  <el-dialog
    :title="classObj.id ? '编辑分类' : '添加分类'"
    :visible.sync="visible"
    width="500px"
    :before-close="
      () => {
        $emit('close');
      }
    "
  >
    <el-form
      size="small"
      :rules="rules"
      :model="form"
      ref="classForm"
      label-width="90px"
    >
      <el-form-item label="父级分类" prop="name">
        <el-select
          :disabled="classObj.sys_default === 1"
          v-model="form.higherup"
          placeholder="请选择"
        >
          <el-option
            v-for="item in parentList"
            :key="item.id"
            :label="item.kind_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称" prop="kind_name">
        <el-input
          :disabled="classObj.sys_default === 1"
          v-model="form.kind_name"
        ></el-input>
      </el-form-item>
      <el-form-item label="分类图片" prop="style">
        <el-upload
          action="https://wx.chengkenet.com/api/common/upload/"
          :headers="{
            Authorization: `Bearer ${getToken()}`
          }"
          list-type="picture-card"
          :on-remove="coverRemove"
          :on-success="coverUpload"
          :file-list="form.style"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">建议尺寸：110px*110px</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getAddClassData, addClass } from "@/api/good-mng";
import { getToken } from "@/utils/auth";
export default {
  props: ["visible", "classObj"],
  data() {
    var checkImg = (rule, value, callback) => {
      if (this.form.higherup && value.length === 0) {
        callback(new Error("请上传图片"));
      } else {
        callback();
      }
    };
    return {
      form: {
        higherup: null,
        kind_name: "",
        style: []
      },
      rules: {
        kind_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" }
        ],
        style: [{ validator: checkImg, trigger: "blur" }]
      },
      parentList: []
    };
  },
  watch: {
    visible: function(val) {
      if (val) {
        getAddClassData().then(res => {
          if (res.code === 200) {
            this.parentList = [{ id: null, kind_name: "请选择" }, ...res.data];
          }
        });
        this.form.higherup = this.classObj.higherup
          ? this.classObj.higherup
          : null;
        this.form.kind_name = this.classObj.kind_name
          ? this.classObj.kind_name
          : "";
        if (this.classObj.style) {
          this.form.style.push({ name: "", url: this.classObj.style });
        }
      } else {
        this.$refs["classForm"].resetFields();
        this.form.style = [];
      }
    }
  },
  methods: {
    submit() {
      this.$refs["classForm"].validate(valid => {
        if (valid) {
          let obj = { ...this.form };
          obj.style = obj.style[0] ? obj.style[0].url : "";
          obj.id = this.classObj.id ? this.classObj.id : null;
          addClass(obj).then(res => {
            if (res.code === 200) {
              this.$message({
                message: this.classObj.id ? "修改成功" : "添加成功",
                type: "success"
              });
              this.$emit("close");
            }
          });
        }
      });
    },
    coverUpload(response, file, fileList) {
      this.form.style.push({ name: "", url: response.data.file });
    },
    coverRemove(file, fileList) {
      this.form.style.forEach((item, index) => {
        if (item.uid === file.uid) {
          this.form.style.splice(index, 1);
          return;
        }
      });
    },
    getToken() {
      return getToken();
    }
  },
  created() {
    getAddClassData().then(res => {
      if (res.code === 200) {
        this.parentList = [{ id: null, kind_name: "请选择" }, ...res.data];
      }
    });
  }
};
</script>

<style></style>
